<template>
  <div class="card-list">
    <a-list
      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
      :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item" :rowKey="item.id">
        <template v-if="item.add">
          <a-button class="new-btn" type="dashed" @click="addNew">
            <a-icon type="plus" />新增
          </a-button>
        </template>

        <template v-else>
          <a-popover :title="'轮播图id:' + item.id" class="meta-content">
            <template slot="content">
              <p>分类id:{{ item.carouselGroupId }}</p>
              <p>分类名:{{ item.classification }}</p>
            </template>
            <a-card :hoverable="true">
              <a-avatar
                shape="square"
                class="card-avatar"
                slot="cover"
                :src="item.url"
                size="large"
              />
              <a slot="actions" @click="del(item)">删除</a>
            </a-card>
          </a-popover>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
let dataSource = [];
dataSource.push({
  add: true,
});

export default {
  name: "CardList",
  props: ["carouselList", ],
  created() {
    this.dataSource = dataSource.concat(this.carouselList);
  },
  data() {
    return {
      dataSource,
    };
  },
  methods: {
    addNew() {
      this.$emit("addNew");
    },
    del(item) {
      this.$emit("del", item);
    },
    // formmater(id) {
    //   let temp = this.carouselGroupList.map((item) => {
    //     if (item.value === id) {
    //       return item.label;
    //     }
    //   });
    //   return temp[0];
    // },
  },
  watch: {
    carouselList(newVal) {
      this.dataSource = [
        {
          add: true,
        },
        ...newVal,
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.card-avatar {
  width: 100%;
  height: 200px;
}
.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 200px;
}
.meta-content {
  position: relative;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
